<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>人员管理</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">   
	<link rel="stylesheet" href="js/operamasks/themes/default/om-default.css"> 
	<link rel="stylesheet" href="css/user.css"> 
	<script src="js/jquery/jquery-1.6.1.min.js"></script>
	<script type="text/javascript" src="js/operamasks/ui/operamasks-ui.js"></script>
	<style type="text/css">
	html, body {
	    font-family: "Arial","Helvetica","Verdana","sans-serif";
	    font-size: 12px;
	    height: 96%;
	    margin: 0;
	    padding: 0;
	    width: 98%;
	}
	
       label.error{
        background: #fff6bf url(images/alert.png) center no-repeat;
		background-position: 5px 50%;
		text-align: left;
		padding: 2px 20px 2px 25px;
		border: 1px solid #ffd324;
		display: none;
		width: 200px;
		margin-left: 10px;
       }
	</style>
<script type="text/javascript">
   $(function(){
	   //查询所有用户，使用omGrid组件
	   $('#grid').omGrid({
           dataSource : 'user/search.do',
           limit : 10,
           height : 355,
           colModel : [ {header : '用户名', name : 'userName', width : 100, align : 'center'}, 
                        {header : '年龄', name : 'age', width : 50, align : 'left'}, 
                        {header : '地址', name : 'address', align : 'left',width:180}, 
                        {header : '电话', name : 'tel', align : 'left',width:120} ,
                        {header : '邮件地址', name : 'email', align : 'left', width : 'autoExpand'}]
       });
	   
	   $('#save').omButton({});
	   
	   $('#editorUser').omDialog({
           autoOpen : false, 
           height:240,
           width : 440,
           title : '编辑用户',
           buttons : {
                   "保存" : function(){
                	   if($("#userForm").valid()){
                	   		$('#userForm').submit();
                	   }
		            },
                   "取消" : function() {
                	   $('#editorUser').omDialog("close");//关闭dialog
                   }
            }
       });
	   
	   $('#delete').click(function(){
		   var selects = $('#grid').omGrid("getSelections",true);
		   if(selects == null || selects.length <= 0){
			   $.omMessageTip.show({type:'error',title : '删除用户',content :   '请选择记录！',timeout :2000});
			   return;
		   }
		   $.omMessageBox.confirm({
	           title:'确认删除',
	           content:'你确定要这样做吗？',
	           onClose:function(v){
	        	   if(v){
		        	   $.ajax({
		     			  url :  'user.htm?method=delete',
		     			  datType : 'json',
		     			  data : {id:selects[0].id},
		     			  success : function(data){
		     				 $.omMessageTip.show({title : '删除用户',content :   '删除成功！',timeout :2000});
		     				 $('#grid').omGrid('reload');
		     			  }
		     		   });
	        	   }
	           }
	       });
	   });
	   
	   $('#add').click(function(){
		   $('#editorUser').omDialog('open');
		   $('#userForm').omAjaxSubmit({resetForm: true});
		   $('#id').val('');
	   });
	   
	   $('#modify').click(function(){
		   var selects = $('#grid').omGrid("getSelections",true);
		   if(selects == null || selects.length <= 0){
			   $.omMessageTip.show({type:'error',title : '修改用户',content :   '请选择记录！',timeout :2000});
			   return;
		   }
		   $('#editorUser').omDialog('open');
		   $('#id').val(selects[0].id);
		   $('#userName').val(selects[0].userName);
		   $('#age').val(selects[0].age);
		   $('#address').val(selects[0].address);
		   $('#tel').val(selects[0].tel);
		   $('#email').val(selects[0].email);
	   });
	   
	   var options = {
               url : 'user.htm?method=save', 
               dataType : 'json',
               success : function(data){
            	   if(data == '1'){
            		   $.omMessageTip.show({title : '保存用户',content :   '保存成功！',timeout :2000});
            		   $('#editorUser').omDialog("close");
            		   $('#grid').omGrid('reload');
            	   }else{
            		   $.omMessageTip.show({type:'error',title : '保存用户',content :   '保存失败！',timeout :2000});
            	   }
               }
           };
           $('#userForm').submit(function(){
               $(this).omAjaxSubmit(options);
               return false;//返回false,阻止浏览器默认行为
           });
           
         //校验age输入框，必须为数字
           $("#userForm").validate({
               rules : {
            	   age : {
            		   number : true,
            		   min : 0,
            		   max : 100,
            		   required : true
                   }
               },
               messages : {
            	   age : {
            		   number : "必须为数字",
            		   min : "不能小于0",
            		   max : "不能大于100",
            		   required : "必须输入"
                   }
               }
           });
   });
</script>
  </head>
  
  <body>
     <div class="toolbar mar">
         <a href="#" class="rbutton" id="add"><span><img src="images/add.gif" width="14" height="14" /><ins>添加</ins></span></a>
         <A  class="line"></A>
         <a href="#" class="rbutton" id="modify"><span><img src="images/shezhi.gif" width="14" height="14" /><ins>修改</ins></span></a>
         <A  class="line"></A>
         <a href="#" class="rbutton" id="delete"><span><img src="images/del.gif" width="14" height="14" /><ins>删除</ins></span></a>
    </div>
    <table id="grid"></table>
    
    <div id="editorUser" >
       <form id="userForm" method="post"> <!-- 如果method配置为get 则会出现中文乱码，需要配置tomcat的编码 -->
         <table>
            <tr>
               <td>用户名:</td>
               <td>
                 <input type="hidden" id="id" name="Uid"/>
                 <input type="text" id="userName" name="userName"/>
               </td>
            </tr>
            <tr>
               <td>年龄:</td>
               <td><input type="text" id="age" name="age"/></td>
            </tr>
            <tr>
               <td>地址:</td>
               <td><input type="text" id="address" name="address"/></td>
            </tr>
            <tr>
               <td>电话:</td>
               <td><input type="text" id="tel" name="tel"/></td>
            </tr>
            <tr>
               <td>邮件地址:</td>
               <td><input type="text" id="email" name="email"/></td>
            </tr>
         </table>
       </form>
    </div>
  </body>
</html>
